<template>
    <view class="order">
        <view class="order-top">订单信息</view>
        <u-line dashed></u-line>
        <view class="order-main">
            <view class="order-tips" v-if="$utils.isHad(orderModel.order.orderStatus, [1])">订单已提交到影院，请耐心等待</view>
            <view class="order-lis" @click="copyClick">
                订单编号：{{ orderModel.order.outTradeNo }}
                <image class="order-imgs" src="/sub_pages/movie/static/image/icon/icon_29.png" mode="scaleToFill" />
            </view>
            <view v-if="$utils.isHad(orderModel.order.orderStatus, [1, 2])">
                <view class="order-lis">下单时间：{{ orderModel.order.createTime | formatDate }}</view>
                <!-- <view class="order-lis">电影卡抵扣：￥{{ parseFloat(orderModel.order.cardSaveAmount || 0).toFixed(2) }}</view>
                <view class="order-lis">优惠券抵扣：￥{{ parseFloat(orderModel.order.couponSaveAmount || 0).toFixed(2) }}</view>
                <view class="order-lis">余额抵扣：￥{{ parseFloat(orderModel.order.walletAmount || 0).toFixed(2) }}</view> -->
                <view class="order-lis">实际付款：￥{{ parseFloat(orderModel.order.orderAmount || 0).toFixed(2) }}</view>
            </view>

            <!-- <view class="order-lis">
				<view class="order-label">实际付款：</view>
				<view>￥12.00</view>
			</view> -->
        </view>
    </view>
</template>

<script>
export default {
    props: {
        orderModel: {
            type: Object,
            default: () => {},
        },
    },
    methods: {
        copyClick() {
            this.$emit('copy', this.orderModel.order.outTradeNo);
        },
    },
};
</script>

<style lang="scss" scoped>
.order {
    padding: 30rpx;
    background-color: #fff;
    &-top {
        @include font(30rpx, #333333, bold);
        padding-bottom: 20rpx;
    }
    &-main {
        padding-top: 20rpx;
    }
    &-tips {
        @include font(26rpx, #666);
    }
    &-lis {
        padding-top: 10rpx;
        @include font(26rpx, #999);
        @include flexCenter;
    }
    &-label {
        width: 160rpx;
    }
    &-imgs {
        width: 24rpx;
        height: 24rpx;
        margin-left: 10rpx;
    }
}
</style>
